<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>分类</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="format-detection" content="telephone=no, email=no"/>

    <meta name="keywords" content="商城">
    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">
    <!-- 手机百度搜索打开网页时,不需要为网页进行转码-->
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <link rel="icon" type="image/png" href="$!webPath/resources/app/mcjd/images/logo.png">
    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    
    <link rel="stylesheet" type="text/css" href="$!webPath/resources/app/mcjd/css/common_jmc.css"/>
    <link rel="stylesheet" type="text/css" href="$!webPath/resources/app/mcjd/css/jmc_icon.css"/>
    <link rel="stylesheet" type="text/css" href="$!webPath/resources/app/mcjd/css/jmc_classify.css"/>
    <script type="text/javascript" src="$!webPath/resources/app/mcjd/js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="$!webPath/resources/app/mcjd/js/template.js"></script>
    <!--script type="text/javascript" src="$!webPath/resources/app/mcjd/js/combase.js"></script-->
    <script type="text/javascript">
    var __shareTitle = '【一家】社区包邮购，买啥都包邮';
    var __sharePicture = '$!webPath/resources/app/orgShipfree/images/logo.png';
    var __shareContent = '就这么任性~';
    var __shareUrl = window.location.href;
    window._URI_ = {
        IP0: '$!mallBaseurl', // 本地
        IP1: 'http://testmall.yijiahn.com/mall' // 开发环境
    }
    window._URL_ = {
        shareparams: _URI_.IP0 + '/app/wx/shareparams.json', // 分享
        goodslist: _URI_.IP0 + '/app/category/goods/list.json', // 商品列表 app/orgShipfree/goodslist.json?pageNo=&priceMin=&priceMax=&classId=&key=&priceSort=&salesSort=     priceSort,salesSort 1升序 0降序
        classLeveOne: _URI_.IP0 + '/app/goodsClass/levelOne.json', // 一级分类列表
        classLevelTwoThree: _URI_.IP0 + '/app/goodsClass/levelTwoThree.json' // 二三级分类列表
        
    };
    </script>
</head>
<body>
    
    <div id="bxTopbar">
        <div class="bx_topbar">
            <div class="h_44"></div>
            <div class="wp_topbar">
                <div class="it_btn it_back_btn" onclick="javascript:history.back(-1);"><i class="icon ico_1"></i></div>
                <div class="it_btn it_cart_btn"><i class="icon ico_3"></i></div>
                <div class="it_toptt">分类</div>
            </div>
        </div>
    </div>

    <div class="pg-category">
        <div class="bx-category">
            <aside class="aside-cl">
                <ul class="cl-con"  id="resGdClassify">
                    <!-- <li class="active">家用电器</li> -->
                </ul>
            </aside>
            <aside class="aside-cr">
                <div class="cr-con" id="resGdList">
                    <!-- <a href="#"><h5>大家电</h5></a>
                    <ul class="clearfix">
                        <li>
                            <a href="#"></a>
                            <div class="it_img">
                                <var>
                                    <span>
                                        <img src="images/img2.png" alt="平板电视">
                                    </span>
                                </var>
                            </div>
                            <span>平板电视</span>
                        </li>
                    </ul> -->
                </div>
                <div id="resNoData2" style="display:none;"><div class="no_loaddata"></div></div>
            </aside>

            <div id="resNoData"><div class="no_loaddata"></div></div>
        </div>
    </div>

    <!-- 模板 -->
    <script type="text/html" id="tmplGdClassify">
        {{each goodsClasses as item ind}}
            {{if ind == 0}}
                <li class="active" it_goodsClassId="{{item.goodsClassId}}">{{item.goodsClassName}}</li>
            {{else}}
                <li it_goodsClassId="{{item.goodsClassId}}">{{item.goodsClassName}}</li>
            {{/if}}
        {{/each}}
    </script>
    <script type="text/html" id="tmplGdList">
        {{each dataList as item ind}}
        <a href="#" it_goodsClassId="{{item.goodsClassId}}"><h5>{{item.goodsClassName}}</h5></a>
        <ul class="clearfix">
            {{each item.childrenGoodsClasses as item2 ind2}}
            <li it_goodsClassId="{{item2.goodsClassId}}">
                <a href="#"></a>
                <div class="it_img">
                    <var>
                        <span>
                            <img src="{{item2.goodsClassImage.middlePicUrl}}">
                        </span>
                    </var>
                </div>
                <span>{{item2.goodsClassName}}</span>
            </li>
            {{/each}}
        </ul>
        {{/each}}
    </script>
    <script type="text/html" id="tmplNoData">
        {{if getArrNum(goodsList) <= 0 && '0' == pageNo}}
        <div class="no_data_pg">
            <img src="$!webPath/resources/app/mcjd/images/ico9.png"><p>该推荐专区下没有商品</p>
        </div>
        {{else if getArrNum(goodsList) < 1}}
        <div class="no_moredata">
            <img src="$!webPath/resources/app/mcjd/images/ico9.png" width="41" /><p>别拉啦 到底啦</p>
        </div>
        {{else}}
            <div class="no_loaddata"></div>
        {{/if}}
    </script>
    <script type="text/html" id="tmplErrorData">
        <div class="no_errordata">
            <div class="error_refresh_btn"><img src="$!webPath/resources/app/mcjd/images/ico_7.png" width="26" /><p>出错了，点击刷新</p></div>
        </div>
    </script>
    <script type="text/javascript">
        template.helper("getArrNum", function(val){
            var n = val.length || 0;
            return n;
        });
    </script>

    <script type="text/javascript" src="$!webPath/resources/app/mcjd/js/touch.min.js"></script>
    <script type="text/javascript" src="$!webPath/resources/app/mcjd/js/imgSetSize.min.js"></script>
    <script type="text/javascript" src="$!webPath/resources/app/mcjd/js/utils.js"></script>
    <script type="text/javascript">
        var __isApp_, __srcApp_, __appversion_, __url_, __isWeixin_ = Utils.isWeixin();
        var _jdStoreId="$!jdStoreId",_orgId = "$!orgId",_accessToken="$!accessToken";
        Utils.lsRemove("_isApp");
        var _isIos = Utils.isiOs();
        var _isApp = Utils.isApp(__isApp_);

        // 跳转
        function togoodsdetail(c_goodsId, c_url) {
            window.location.href = c_url;
            /*
            if(!_isApp || '0' == _isApp) {
                window.location.href = c_url;
            }else{
                Utils.sendMsgToApp('/togoodsdetail?goodsid='+encodeURIComponent(c_goodsId));
            }
            */
        };
        
        jQuery(function($) {
            // 获取分类
            function get_GdClassify() {
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    timeout: 15000,
                    url: _URL_.classLeveOne,
                    data: {
                    	storeId: _jdStoreId
                    },
                    success: function(res) {
                        pageFlag = true;
                        if ("100" === res.code) {
                            res.data.goodsList = res.data.goodsClasses || [];
                            var html = template('tmplGdClassify', res.data);
                            $('#resGdClassify').append(html);

                            // 获取第一个分类id
                            if(res.data.goodsList.length > 0){
                            	$('#resNoData').hide();
                            	_cid=res.data.goodsList[0].goodsClassId;
	                            get_Goodslist(_cid);
                            }
                        } else if ("401" === res.code) { //App端请求，需要登录
                            Utils.showToast("请登录后再操作！");
                        } else if ("405" === res.code) { //微信端请求，需要登录
                            Utils.showToast("请先微信授权后再操作！");
                        } else {
                            console.log('请求出错: ' + _URL_.classLeveOne);
                            Utils.showToast(res.code + ":" + res.msg || '请求出错');
                        }
                    },
                    error: function(xhr) {
                        var errorhtml = template('tmplErrorData', {});
                        $('#resNoData').html(errorhtml);
                        console.log('请求出错: ' + _URL_.classLeveOne);
                        var msg = "请求出错(请检查相关网络状况)";
                        Utils.showToast(msg);
                    }
                });
            };
            get_GdClassify();

            var _cid, pageNo = 0, pageSize = 20, pageFlag = false;
            // 商品列表
            function get_Goodslist(_cid) {
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    timeout: 5000,
                    url: _URL_.classLevelTwoThree,
                    data: {
                    	goodsClassId: _cid,
                        pageNo: pageNo
                    },
                    success: function(res) {
                        pageFlag = true;
                        if ("100" === res.code) {
                            res.data.goodsList = res.data.dataList || [];
                            //if(res.data && res.data.goodsList && res.data.goodsList.length < 1) {
                                pageFlag = false;
                            //}
                            res.data.pageNo = pageNo;
                            res.data.pageSize = pageSize;
                            var html = template('tmplGdList', res.data);
                            $('#resGdList').empty();
                            $('#resGdList').append(html);
                            if(res.data.goodsList.length == 0){                            	
	                            var nohtml = template('tmplNoData', res.data);
	                            $('#resNoData2').html(nohtml);
                            }

                            $("img[ig_crop='max']").imgSetSize();
                        } else if ("401" === res.code) { //App端请求，需要登录
                            Utils.showToast("请登录后再操作！");
                        } else if ("405" === res.code) { //微信端请求，需要登录
                            Utils.showToast("请先微信授权后再操作！");
                        } else {
                            pageNo -= 1;
                            pageFlag = false;
                            var errorhtml = template('tmplErrorData', {});
                            $('#resNoData2').html(errorhtml);
                            console.log('请求出错: ' + _URL_.classLevelTwoThree);
                            Utils.showToast(res.code + ":" + res.msg || '请求出错');
                        }
                    },
                    error: function(xhr) {
                        pageNo -= 1;
                        pageFlag = false;
                        var errorhtml = template('tmplErrorData', {});
                        $('#resNoData2').html(errorhtml);
                        console.log('请求出错: ' + _URL_.classLevelTwoThree);
                        var msg = "请求出错(请检查相关网络状况)";
                        Utils.showToast(msg);
                    }
                });
            };
            
            //跳购物车
   			$(".it_btn.it_cart_btn").click(function(){
   				location.href="$!webPath/app/mcjd/gdCart.htm?accessToken="+_accessToken+"&orgId="+_orgId
   			});
            
            // 出错刷新
            $('#resNoData').on('click', '.error_refresh_btn', function() {
                $('#resNoData').html('<div class="no_loaddata"></div>');
                get_GdClassify();
            });
            $('#resNoData2').on('click', '.error_refresh_btn', function() {
                $('#resNoData2').html('<div class="no_loaddata"></div>');
                get_Goodslist(_cid);
            });
            
            window.onscroll = function() {
                if(pageFlag){
                    //获取当前可视范围的高度
                    var clientHeight = 0;
                    if (document.body.clientHeight && document.documentElement.clientHeight) {
                        clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
                    }else {
                        clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
                    }
                    // 滚动条位置
                    var scrollTop = 0;
                    if (document.documentElement && document.documentElement.scrollTop) {
                        scrollTop = document.documentElement.scrollTop;
                    }
                    else if (document.body) {
                        scrollTop = document.body.scrollTop;
                    }
                    // 获取文档完整的高度
                    var scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
                    // 判断加载
                    if (scrollTop + clientHeight >= scrollHeight) {
                        pageFlag = false;
                        pageNo += 1;
                        get_Goodslist(_cid);
                    }
                }
            };
            
	        $(document).on("click", "#resGdClassify li", function(){
	        	$("#resGdClassify").children("li").removeClass("active")
	        	$(this).addClass("active");
	        	var goodsClassId = $(this).attr('it_goodsClassId');
	        	get_Goodslist(goodsClassId);
	        });
	        $(document).on("click", "#resGdList a", function(){
	        	$("#resGdClassify").children("li").removeClass("active")
	        	$(this).addClass("active");
	        	var goodsClassId = $(this).attr('it_goodsclassid');
	        	location.href="gdList.htm?goodsClassId="+goodsClassId
	        });
	        $(document).on("click", ".clearfix li", function(){
	        	$("#resGdClassify").children("li").removeClass("active")
	        	$(this).addClass("active");
	        	var goodsClassId = $(this).attr('it_goodsclassid');
	        	location.href="gdList.htm?goodsClassId="+goodsClassId +"&accessToken="+_accessToken+"&orgId="+_orgId;
	        });
        });
        
    </script>
  
</body>
</html>